<!--
  - Author: Ray (qray686898@163.com)
  -->

<template>
  <div class="menu-wrapper">
    <template v-for="(item,index) in menu">
      <template v-if="item.menuType =='MENU'">
        <el-menu-item v-if="item.children == null ||item.children.length===0 " :index="filterPath(item.menuUrl,index)" @click="open(item)" :key="item.menuCode">
          <i :class="item.icon"></i>
          <span slot="title" class="menu-title-1">{{item.menuName}}</span>
        </el-menu-item>
        <el-submenu v-else :index="filterPath(item.menuName,index)" :key="item.menuName">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title" :class="{'el-menu--display':isCollapse}" class="menu-title">{{item.menuName}}</span>
          </template>
          <template v-for="(child,cindex) in item.children">
            <el-menu-item :index="filterPath(child.menuUrl,cindex)" @click="open(child)" v-if="child.children == null || child.children.length===0" :key="cindex">
              <i :class="child.icon"></i>
              <span slot="title" class="menu-title">{{child.menuName}}</span>
            </el-menu-item>
            <sidebar-item v-else :menu="child.children" :key="cindex" :isCollapse="isCollapse"></sidebar-item>
          </template>
        </el-submenu>
      </template>
    </template>
  </div>
</template>
<script>
import { resolveUrlPath } from "@/util/util";
export default {
  name: "SidebarItem",
  data () {
    return {};
  },
  props: {
    menu: {
      type: Array,
      default: function () {
        return []
      }
    },
    isCollapse: {
      type: Boolean
    }
  },
  created () { },
  mounted () { },
  computed: {},
  methods: {
    filterPath (path, index) {
      return path == null ? index + "" : path;
    },
    open (item) {
      this.$router.push({
        path: resolveUrlPath(item.menuUrl, item.menuName),
        query: item.query
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.menu-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
.menu-title-1 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
</style>

